<template>
  <!-- 还有其他container，所以添加一个class属性，给它设置样式 -->
  <el-container class="home-container">
    <el-header>
      <div>
        <img src="/favicon.ico" />
        <span>云盘管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleMenu">|||</div>
        <el-menu background-color="#84b8e0" text-color="#000" active-text-color="#8e8f91" unique-opened
          :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath">
          <el-sub-menu v-for="menu in level1Menu" :key="menu.menuId" :index="menu.menuId + ''">
            <template #title>
              <el-icon>
                <user />
              </el-icon> 
              <span>{{ menu.menuName }}</span>
            </template>

            <el-menu-item v-for="subMenu in level2Menu(menu.menuId)" :key="subMenu.menuId" :index="subMenu.menuUrl"
              @click="saveActiveMenu(subMenu.menuUrl)">
              <i :class="subMenu.icon"></i>
              <span>{{ subMenu.menuName }}</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main><router-view></router-view></el-main>
    </el-container>
  </el-container>
</template>

<script setup name='Home'>
  /* 获取当前应用的路由和路由器实例*/
  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter()
  const route = useRoute()
  /*注入全局axios实例*/
  import { inject } from 'vue'
  let $http = inject('$http');

  /* 引入ref、computed*/
  import { ref, computed } from 'vue'

  /*声明响应式数据*/
  const isCollapse = ref(false);
  const activePath = ref('');
  const menuList = ref([
  {
    menuId: 1,
    parentMenuId: 0, // 一级菜单
    menuName: "用户管理",
    menuUrl: "",
    icon: "el-icon-user",
  },
  {
    menuId: 2,
    parentMenuId: 0, // 一级菜单
    menuName: "系统设置",
    menuUrl: "",
    icon: "el-icon-setting",
  },
  {
    menuId: 101,
    parentMenuId: 1, // 二级菜单，隶属于“用户管理”
    menuName: "用户列表",
    menuUrl: "/user",
    icon: "el-icon-document",
  },
  {
    menuId: 102,
    parentMenuId: 1, // 二级菜单，隶属于“用户管理”
    menuName: "后台用户",
    menuUrl: "/adminView",
    icon: "el-icon-s-check",
  },
  {
    menuId: 201,
    parentMenuId: 2, // 二级菜单，隶属于“系统设置”
    menuName: "系统日志",
    menuUrl: "/system/log",
    icon: "el-icon-notebook-1",
  },
]);
  /*组件逻辑*/
  // 计算属性：过滤一级菜单
  const level1Menu = computed(() => {
    let list = menuList.value.filter((menu) => menu.parentMenuId === 0)
    console.log('list', list);
    return list;
  });
  // 计算属性：过滤二级菜单
  const level2Menu = computed(() => {
    return function (parentMenuId) {
      return menuList.value.filter(
        (menu) => menu.parentMenuId === parentMenuId
      )
    }
  });

  // 注销：清空sessionStorage，然后跳转到登录页
  const logout = function () {
    localStorage.removeItem("admin-token");
    router.push('/login')
  }

  const getMenuList = function () {
    $http({method: "post", url: "/user/menuSearch"})
          .then(response=> {
            menuList.value = response.data.data;
            console.log(response.data.data);
          })
  };
  const toggleMenu = function () {
    isCollapse.value = !isCollapse.value;
  };

  const saveActiveMenu = function (activePathParam) {
    localStorage.setItem('activePath', activePathParam)
    activePath.value = activePathParam
  }

  // getMenuList()
  activePath.value = sessionStorage.getItem('activePath')

</script>

<style lang="less" scoped>
  .home-container {
    height: 100%;
  }

  .el-header {
    background-color: #57adf0;

    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size: 20px;

    div {
      display: flex;
      align-items: center;

      img {
        height: 40px;
      }

      span {
        margin-left: 20px;
      }
    }
  }

  .el-aside {
    background-color: #84b8e0;

    .el-menu {
      border-right: none;
    }
  }

  .el-main {
    background-color: #eaedf1;
  }

  .toggle-button {
    background-color: #84b8e0;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
  }
</style>
